<template>
  <!-- 同步中提示 -->
  <div v-if="syncState.isSyncing" class="sync-notification syncing">
    <div class="notification-content">
      <div class="loading-spinner"></div>
      <span>正在同步数据...</span>
    </div>
  </div>
  
  <!-- 同步成功提示 -->
  <div v-if="syncState.syncSuccess" class="sync-notification success">
    <div class="notification-content">
      <svg class="success-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="currentColor" stroke-width="2"/>
        <polyline points="22,4 12,14.01 9,11.01" stroke="currentColor" stroke-width="2"/>
      </svg>
      <span>同步成功</span>
    </div>
  </div>
  
  <!-- 同步失败提示 -->
  <div v-if="syncState.syncError" class="sync-notification error">
    <div class="notification-content">
      <svg class="error-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
        <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
        <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
      </svg>
      <span>同步失败: {{ syncState.syncError }}</span>
      <button class="close-btn" @click="clearError">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
          <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2"/>
          <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2"/>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { useSyncStore } from '@/stores/syncStore'

const { syncState, clearSyncError } = useSyncStore()

const clearError = () => {
  clearSyncError()
}
</script>

<style lang="less" scoped>
.sync-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  min-width: 200px;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  animation: slideIn 0.3s ease-out;
  
  &.syncing {
    background-color: rgba(99, 102, 241, 0.9);
    color: white;
  }
  
  &.success {
    background-color: rgba(16, 185, 129, 0.9);
    color: white;
  }
  
  &.error {
    background-color: rgba(239, 68, 68, 0.9);
    color: white;
  }
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.success-icon,
.error-icon {
  flex-shrink: 0;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  margin-left: auto;
  transition: background-color 0.2s ease;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>